<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="frame-layout">
	<head>
	 	<link href="/webjars/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet" />
		<link href="lib/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" type="text/css" />
		<link href="lib/tags-input/jquery.tagsinput.min.css" rel="stylesheet" type="text/css" />
    </head>
	<body>
		<div th:remove="tag" layout:fragment="content">
			<div class="panel panel-default">
				<div class="panel-heading">
		    		<h3 class="panel-title"><i id="job-type-class"></i> 作业名称：<span id="job-name" th:text="${jobName}"></span>
			    		<span class="inline label label-primary">成功率: <span th:text="${jobRate}" th:remove="tag"></span></span>&nbsp;
			    		<span id="job-status-span" class="label">运行状态: <span th:text="${jobStatus}" th:remove="tag"></span></span>
			    		<div id="job-operation" class="pull-right">
			    			<button id="isJobEnabled" class="btn"></button>
			    			<button id="run-at-once-btn" class="btn btn-info">立刻执行一次</button>
			    			<button id="stop-at-once-btn" class="btn btn-warning show-when-is-new-saturn">立刻终止作业</button>
			    			<button id="remove-job" class="btn btn-danger" data-target="#remove-job-confirm-dialog" data-toggle="modal" data-msg="确认删除该作业吗？">删除作业</button>
			    		</div>
		    		</h3>
		    	</div>
		    	<div class="panel-body">
				    <ul class="nav nav-tabs" role="tablist">
				        <li data-toggle="tooltip" title="单击刷新" id="settings_tab" role="presentation" class="active"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab"><i class="fa fa-gear"></i> 设置</a></li>
				        <li data-toggle="tooltip" title="单击刷新" id="servers_tab" role="presentation"><a href="#servers" aria-controls="servers" role="tab" data-toggle="tab"><i class="fa fa-server"></i> Executor</a></li>
				        <li data-toggle="tooltip" title="单击刷新" id="execution_info_tab" role="presentation"><a href="#execution_info" aria-controls="execution_info" role="tab" data-toggle="tab"><i class="fa fa-bar-chart-o fa-fw"></i> 分片</a></li>
				    </ul>
				    <div class="tab-content">
				        <div role="tabpanel" class="tab-pane active" id="settings">
					        <div id="history-config" style="display:none;">
					        	<table id="history-config-table" class="table table-hover table-bordered" style="width: 100%;">
					                <thead>
					                    <tr>
					                        <th>行号</th>
					                        <th>负荷</th>
					                        <th>本地模式</th>
					                        <th>只使用优先Executor</th>
					                        <th>分片数</th>
											<th>超时（告警）</th>
					                        <th>超时（Kill线程/进程）</th>
					                        <th class="hide-when-is-msg-job-in-history">cron表达式</th>
					                        <th class="show-when-is-msg-job-in-history">Queue名</th>
					                        <th class="show-when-is-msg-job-in-history">Channel名</th>
					                        <th>更新人</th>
					                        <th>更新时间</th>
					                        <th>操作</th>
					                        <th class="hide">隐藏供搜索列</th>
					                    </tr>
					                </thead>
					                <tbody>
					                </tbody>
					            </table>
					            <div class="pull-left">
					            	<button type="button" id="reload-history-config" class="btn btn-primary" title="">重新加载</button>
					            </div>
					            <div class="pull-right">
					            	<button type="button" id="show-current-config" class="btn btn-primary" title="">查看当前配置</button>
					            </div>
					            <div class="clearfix"></div>
				            </div>
				            <form id="job-settings-form" class="form-horizontal">
				            	<div class="panel panel-default">
									<div class="panel-heading">
										<a data-toggle="collapse" href="#base-config-body">
											<h3 class="pull-left panel-title">基本配置</h3>
											<i class="pull-right fa fa-minus"></i>
										</a>
										<div class="clearfix"></div>
									</div>
									<div id="base-config-body" class="panel-collapse collapse in">
										<div class="panel-body">
							                <div class="form-group hide-when-is-script-job" style="margin-top:4px;">
							                    <label for="jobClass" class="col-sm-2 control-label">作业实现类</label>
							                    <div class="col-sm-9">
							                        <input type="text" id="jobClass" name="jobClass" class="form-control" readonly="readonly" />
							                    </div>
							                </div>
							                
							                <div class="form-group">
							                    <label for="shardingTotalCount" class="col-sm-2 control-label">作业分片总数</label>
							                    <div class="col-sm-2">
							                        <input type="number" min="1" id="shardingTotalCount" name="shardingTotalCount" class="form-control" data-toggle="tooltip" data-placement="bottom" title="设置该作业分片的总数" th:required="required" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                    
							                    <label for="processCountIntervalSeconds" class="col-sm-2 control-label">统计处理数据量的间隔秒数</label>
							                    <div class="col-sm-2">
							                        <input type="number" min="1" id="processCountIntervalSeconds" name="processCountIntervalSeconds" class="form-control" 
							                        	data-toggle="tooltip" data-placement="bottom" title="上报ZK的时间间隔，统计时间周期为一天" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>

												<label for="timeZone" class="col-sm-1 control-label">时区</label>
												<div class="col-sm-2">
													<select id="timeZone" class="selectpicker form-control" data-live-search="true" data-size="10" data-width="100%" title="请选择时区">
													</select>
													<span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
												</div>
							                </div>
							                
							                <div class="form-group">
							                    <label for="loadLevel" class="col-sm-2 control-label">负荷</label>
							                    <div class="col-sm-2">
							                        <input type="number" min="1" max="1000" id="loadLevel" name="loadLevel" class="form-control" data-toggle="tooltip" data-placement="bottom" title="每个分片的负荷，默认为1" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>

							                    <label for="cron" class="col-sm-2 control-label hide-when-is-msg-job">cron表达式</label>
							                    <div class="col-sm-2 hide-when-is-msg-job">
							                        <input type="text" id="cron" name="cron" class="form-control" data-toggle="tooltip" data-placement="bottom" title="作业启动时间的cron表达式。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每10秒运行：*/10 * * * * ? &nbsp;&nbsp; 每5分钟运行：0 */5 * * * ?" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                    <a id="check-and-forecast-cron" class="hide-when-is-msg-job" href="javascript:void(0)">预测</a>

							                </div>
							                
							                <div class="form-group">
							                    <label for="localMode" class="col-sm-2 control-label">本地模式</label>
							                    <div class="col-sm-2">
							                        <input type="checkbox" id="localMode" name="localMode" style="height:28px;" data-toggle="tooltip" title="是否启用本地模式" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                    
							                    <label id="onlyUsePreferListLabel" for="onlyUsePreferList" class="col-sm-2 control-label">只使用优先Executor</label>
							                    <div class="col-sm-2">
							                        <input type="checkbox" id="onlyUsePreferList" name="onlyUsePreferList" style="height:28px;" data-toggle="tooltip" title="当没有可用的优先Executor后，不允许把分片迁移到非优先Executor" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                    
							                    <label for="jobDegree" class="col-sm-1 control-label">作业重要等级</label>
							                    <div class="col-sm-2">
													<select id="jobDegree" class="form-control">
														<option selected="selected" value="0" title="0:没有定义">0:没有定义</option>
														<option value="1" title="1:非线上业务">1:非线上业务</option>
														<option value="2" title="2:简单业务">2:简单业务</option>
														<option value="3" title="3:一般业务">3:一般业务</option>
														<option value="4" title="4:重要业务">4:重要业务</option>
														<option value="5" title="5:核心业务">5:核心业务</option>
													</select>
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                </div>
							                
							                <div class="form-group">
							                    <label for="preferList" class="col-sm-2 control-label">优先Executor</label>
							                    <div class="col-sm-9">
													<select id="preferList" class="selectpicker" multiple="multiple" data-live-search="true" data-size="10" data-width="100%" title="请选择优先Executor">
													</select>
												</div>
							                </div>
							                
							                <div class="form-group show-when-is-msg-job">
							                    <label for="queueName" class="col-sm-2 control-label">Queue名</label>
							                    <div class="col-sm-9">
							                        <input type="text" id="queueName" name="queueName" class="form-control" data-toggle="tooltip" data-placement="bottom" title="消息类型job的queue名" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                </div>
							                
							                <div class="form-group">
							                    <label for="jobParameter" class="col-sm-2 control-label">自定义参数</label>
							                    <div class="col-sm-9">
							                        <input type="text" id="jobParameter" name="jobParameter" class="form-control" data-toggle="tooltip" 
							                        data-placement="bottom" title="配置格式: 多个配置使用逗号分隔(key1=value1, key2=value2)。在分片序列号/参数对照表中可作为alias形式引用，格式为{key1}" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                </div>
							                <div class="form-group">
							                    <label for="shardingItemParameters" class="col-sm-2 control-label">分片序列号/参数对照表</label>
							                    <div class="col-sm-9">
							                        <textarea  rows="5" id="shardingItemParameters" name="shardingItemParameters" class="form-control" data-toggle="tooltip" data-placement="bottom" title='分片序列号和参数用等号分隔，多个键值对用逗号分隔，类似map。分片序列号从0开始，不可大于或等于作业分片总数。如：0=a,1=b,2=c; 英文双引号请使用!!代替，英文等号请使用@@代替，英文逗号请使用##代替,。特别的，对于本地模式的作业，只需要输入如：*=a，就可以了。'></textarea>
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                </div>
							                
							                <div class="form-group">
							                    <label for="description" class="col-sm-2 control-label">作业描述信息</label>
							                    <div class="col-sm-9">
							                        <textarea id="description" name="description" class="form-control"></textarea>
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                </div>
										</div>
									</div>
								</div>
				                <div class="panel panel-default">
									<div class="panel-heading">
										<a data-toggle="collapse" href="#advanced-config-body">
											<h3 class="pull-left panel-title">高级配置</h3>
											<i class="pull-right fa fa-plus"></i>
										</a>
										<div class="clearfix"></div>
									</div>
									<div id="advanced-config-body" class="panel-collapse collapse">
										<div class="panel-body">
                                            <div class="form-group">
                                                <label for="timeout4AlarmSeconds" class="col-sm-2 control-label">超时（告警）</label>
                                                <div class="col-sm-2">
                                                    <input type="number" min="0" id="timeout4AlarmSeconds" name="timeoutSeconds" class="form-control" data-toggle="tooltip" data-placement="bottom" title="超时后告警。单位秒。0表示不控制超时。" />
                                                    <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
                                                </div>

                                                <label for="timeoutSeconds" class="col-sm-2 control-label">超时（Kill线程/进程）</label>
                                                <div class="col-sm-2">
                                                    <input type="number" min="0" id="timeoutSeconds" name="timeoutSeconds" class="form-control" data-toggle="tooltip" data-placement="bottom" title="超时后杀死线程/进程。单位秒。0表示不控制超时。" />
                                                    <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
                                                </div>
                                            </div>

											<div class="form-group">
							                    <label for="groups" class="col-sm-2 control-label">所属分组</label>
							                    <div class="col-sm-9">
							                        <input type="text" id="groups" name="groups" class="form-control" data-toggle="tooltip" 
							                        data-placement="bottom" title="作业所属分组，一个作业只能属于一个分组，一个分组可以包含多个作业" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                </div>
							                
											<!--  
											<div class="form-group hide-when-is-script-job-but-show-when-is-vshell-job">
							                    <label for="cron" class="col-sm-2 control-label">执行结果发送的Channel名</label>
							                    <div class="col-sm-9">
							                        <input type="text" id="channelName" name="channelName" class="form-control" data-toggle="tooltip" data-placement="bottom" title="执行消息作业结果发送的channel名，注意不能跟queue绑定的channel一致，以免造成死循环" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
						                	</div>
						                	-->
											<div class="form-group">
												<label for="dependencies" class="col-sm-2 control-label">依赖的作业</label>
												<div class="col-sm-9">
													<select id="dependencies" class="selectpicker" multiple="multiple" data-live-search="true" data-size="10" data-width="100%" title="请选择依赖的作业">
													</select>
												</div>
											</div>
											<div class="form-group">
							                    <label for="showNormalLog" class="col-sm-2 control-label">显示控制台输出日志</label>
							                    <div class="col-sm-1">
							                        <input type="checkbox" id="showNormalLog" name="showNormalLog" data-toggle="tooltip" data-placement="bottom" title="默认不开启，只显示异常情况下的日志；异常情况的日志无论开闭都会显示；日志保存在zk，只保存最新100行；" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                    
							                    <label for="enabledReport" class="col-sm-2 control-label">上报运行状态</label>
							                    <div class="col-sm-1">
							                        <input type="checkbox" id="enabledReport" name="enabledReport" data-toggle="tooltip" data-placement="bottom" title="对于定时作业，默认开启上报；对于消息作业，默认不开启上报（注：由于TPS高的作业开启上报会加强对zkServer的压力，建议对消息作业不开启上报；而如果不开启上报运行状态，又会丧失作业运行状态相关的管理功能，建议对TPS低的作业开启上报，如非秒级的定时作业。仅支持2.0.3及其以上的Executor，请谨慎操作！）" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                    
							                    <label for="useSerial" class="col-sm-2 control-label show-when-is-msg-job">串行消费</label>
							                    <div class="col-sm-1 show-when-is-msg-job">
							                        <input type="checkbox" id="useSerial" name="useSerial" data-toggle="tooltip" data-placement="bottom" title="默认不开启串行消费（即默认为并行消费），另外串行消费只支持单分片场景；" />
							                        <span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
							                    </div>
							                </div>
							                
							                <div class="form-group hide-when-is-msg-job">
							                    <label for="pausePeriodDate" class="col-sm-2 control-label">暂停日期段<br/>
							                    <small style="color:#999">日期时间段，支持多个日期段，逗号隔开<br/>例如03/12-03/15,11/23-12/25<br/>
							                    	当日期为空，时间段不为空，表示每天那些时间段都暂停</small></label>
							                    <div class="col-sm-9">
							                    	<input type="text" id="pausePeriodDate" name="pausePeriodDate" />
							                    	<span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
												</div>
											</div>
							                <div class="form-group  hide-when-is-msg-job">
							                    <label for="pausePeriodTime" class="col-sm-2 control-label">暂停时间段<br/>
							                    <small style="color:#999">日期时间段，支持多个时间段，逗号隔开<br/>例如12:23-13:23,16:00-17:00<br/>
							                    	当日期为不空，时间段为空，表示那些日期段24小时都暂停
							                    </small></label>
							                    <div class="col-sm-9">
							                    	<input type="text" id="pausePeriodTime" name="pausePeriodTime" class="form-control" data-toggle="tooltip" data-placement="bottom" title="小时分钟时间段，支持多个时间段，逗号隔开，格式hh:mm-hh:mm,hh:mm-hh:mm"  />
							                    	<span class="glyphicon glyphicon-warning-sign diff-conf-warning"></span>
												</div>
											</div>
										</div>
									</div>
								</div>
								
				                 
				                <div id="operation-div" class="pull-left"></div>
					            <div id="historyBtn-div" class="pull-right"></div>
				            </form>
				        </div>
				        <div role="tabpanel" class="tab-pane" id="servers">
				            <table id="servers_table" class="table table-hover table-bordered">
				                <thead>
				                    <tr>
				                        <th>Executor</th>
				                        <th>IP</th>
				                        <th>状态</th>
				                        <th>最近处理成功数(每天)</th>
				                        <th>最近处理失败数(每天)</th>
				                        <th>成功率(每天)</th>
				                        <th>分片项</th>
										<th>作业版本</th>
				                        <th>Executor版本</th>
				                    </tr>
				                </thead>
				                <tbody>
				                </tbody>
				            </table>
				        </div>
				        <div role="tabpanel" class="tab-pane" id="execution_info">
				            <table id="execution" class="table table-hover table-bordered" style="word-wrap:break-word;word-break:break-all;">
				                <thead>
				                    <tr>
				                        <th>分片项</th>
				                        <th>状态</th>
				                        <th width="20%">分片返回信息</th>
				                        <th>Executor</th>
				                        <th>最近执行时间<span id="timeZone2"></span></th>
				                        <th class="hide-when-is-msg-job">下次开始时间<span id="timeZone3"></span></th>
				                        <th>日志</th>
				                    </tr>
				                </thead>
				                <tbody>
				                </tbody>
				            </table>
				        </div>
				    </div>
				</div>
				<!-- 日志信息窗口 -->
				<div class="modal" id="myModal" tabindex="-1" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title" id="myModalLabel">运行日志</h4>
							</div>
							<div class="modal-body">
			               		<textarea  rows="10" id="logMsg" name="logMsg" 
			                 		class="form-control" data-toggle="tooltip" data-placement="bottom" title=""></textarea>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default input-sm" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>
				<input type="hidden" id="regNameFromServer" th:value="${session.activated_config}?${session.activated_config.nameAndNamespace}:未连接" />
				<input type="hidden" id="namespace" th:value="${session.activated_config}?${session.activated_config.namespace}:''" />
				<input type="hidden" id="zkAlias" th:value="${session.activated_config}?${session.activated_config.zkAlias}:''" />
				<input type="hidden" id="jobTypeFromController" th:value="${jobType}" />
				<input type="hidden" id="isJobEnabledVal" th:value="${isEnabled}" />
				<input type="hidden" id="jobStatus" th:value="${jobStatus}" />
				<input type="hidden" id="authorizeAllModuleAllPrivilege" th:value="${authorizeAllModuleAllPrivilege}" />
				<input type="hidden" id="authorizeJobServerModuleJobResumePrivilege" th:value="${authorizeJobServerModuleJobResumePrivilege}" />
				<input type="hidden" id="authorizeJobServerModuleJobStopPrivilege" th:value="${authorizeJobServerModuleJobStopPrivilege}" />
			
				<div th:replace="fragments :: success-dialog"></div>
				<div th:replace="fragments :: confirm-dialog(id='remove-job-confirm-dialog', test='')"></div>
				<div th:replace="fragments :: confirm-dialog(id='toggleEnabled-confirm-dialog', text='')"></div>
				<div th:replace="fragments :: confirm-dialog(id='confirmDependencies-confirm-dialog', text='')"></div>
				<div th:replace="fragments :: confirm-dialog(id='stop-at-once-confirm-dialog', text='确认要立刻终止该作业吗？')"></div>
				<div th:replace="fragments :: failure-dialog(id='update-failure-dialog', reason='')"></div>
				<div th:replace="fragments :: confirm-dialog(id='stop-leader-confirm-dialog', test='暂停主节点将导致其他作业节点一起暂停，确认要暂停全部作业节点吗？')"></div>
				<div th:replace="fragments :: confirm-dialog(id='remove-znode-confirm-dialog', text='确认删除该节点吗？')"></div>
				<div th:replace="fragments :: prompt-dialog(id='check-and-forecast-cron-prompt-dialog', text='')"></div>
			</div>
		</div>
		<div th:remove="tag" layout:fragment="footer-scripts">
			<script type="text/x-mustache" id="detail-block-template">
				<span class="hide-when-is-script-job-in-history"><strong>作业实现类:</strong>{{jobClass}}<br /></span>
				<span><strong>本地模式:</strong>{{localMode}}<br /></span>
				<span><strong>只使用优先Executor:</strong>{{onlyUsePreferList}}<br /></span>
				<span><strong>统计处理数据量的间隔秒数:</strong>{{processCountIntervalSeconds}} <br /></span>
		        <span class="hide-when-is-msg-job-in-history"><strong>暂停日期段:</strong>{{pausePeriodDate}}<br /></span>
		        <span class="hide-when-is-msg-job-in-history"><strong>暂停时间段:</strong>{{pausePeriodTime}}<br /></span>
				<span><strong>显示正常作业执行日志:</strong>{{showNormalLog}}<br /></span>
				<span><strong>上报运行状态:</strong>{{enabledReport}}<br /></span>
		        <span><strong>自定义参数:</strong>{{jobParameter}}<br /></span>
		        <span><strong>分片序列号/参数对照表:</strong>{{shardingItemParameters}}<br /></span>
				<span><strong>作业重要等级:</strong>{{jobDegree}}<br /></span>
		        <span><strong>作业描述信息:</strong>{{description}}<br /></span>
		        <span><strong>zk地址:</strong>{{zkList}}<br /></span>
		        <span><strong>命名空间:</strong>{{namespace}}<br /></span>
		        <span><strong>创建人:</strong>{{createBy}}<br /></span>
		        <span><strong>创建时间:</strong>{{createTime}}<br /></span>
			</script>
			<script src="lib/tags-input/jquery.tagsinput.min.js"></script>
			<script src="/webjars/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
			<script src="/webjars/datatables/1.10.11/js/dataTables.bootstrap.min.js"></script>
			<script src="lib/mustache/mustache.min.js"></script>
			<script src="js/job_detail.js?v=saturn-console-ui-version"></script>
		</div>
	</body>
</html>
